<template>
  <xm-container :loading="loading">
    <template v-slot="{ message }">
      <view class="container">
        <view class="scroll-box">
          <view class="title-box">一日三餐的对话</view>
          <TnLazyLoad :src="picture" mode="widthFix" class="banner-img" />
          <view>
            <view class="textBox mt-12">
              <view
                v-for="(item, index) in readList"
                :key="index"
                :id="`scroll${index}`"
              >
                <view
                  class="text"
                  :class="readLine == index ? 'activeText' : ''"
                  :id="`right${index}`"
                >
                  <text>{{ item.text }}</text>
                  <image
                    v-if="
                      (asListIndex == index && playing) ||
                      (currentTime > item.startSeconds &&
                        currentTime < item.endSeconds &&
                        playing)
                    "
                    style="width: 40rpx; height: 40rpx; flex-shrink: 0"
                    src="../../static/imgs/play-css-blue.gif"
                    mode=""
                  ></image>
                </view>
                <view class="chinese_text"> 名词 鱼肉；鱼 </view>

                <!-- <view class="result-wrap" v-if="item.isShowResult"> -->
                <view class="result-wrap">
                  <view class="comment-box" v-if="!item.result">
                    <!-- item.result && item.result!= '' -->
                    <image
                      class="radius-50 pngStyle"
                      :class="item.isPlay ? 'is-translate' : ''"
                      :src="item.isPlay ? playWhiteIconGif : playWhiteIconPng"
                      @click="handleClickPlay(item, index, 1)"
                    ></image>
                    <view class="result-bar"> 2"</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="imgBox flex flex-ai-center">
            <button class="mr-8" open-type="share">
              <TnIcon name="share-square" color="#747474" size="48rpx" />
            </button>
            <image
              class="imgBox-icon mr-8"
              :class="ifZanStatus == 1 ? 'animation' : ''"
              :src="ifZanStatus == 1 ? ossPngList.likeOk : ossPngList.likeNot"
              @tap.stop="onZanIconClick"
            >
            </image>
            <image
              class="imgBox-icon"
              :class="ifZanStatus == 2 ? 'animation' : ''"
              :src="ifZanStatus == 2 ? ossPngList.stepOk : ossPngList.stepNot"
              @tap.stop="onCaiIconClick"
            >
            </image>
          </view>
        </view>

        <view class="bottom_box">
          <view class="wrap">
            <view class="btn-box" @click="toListing">
              <TnIcon
                name="server"
                size="30px"
                color="#BBBBBB"
                @tap="showWordListPopup"
              />
              <!-- <view
                :class="
                  activeTap == 0 && playing ? 'active-iconBox' : 'iconBox'
                "
              >
                <TnIcon
                  name="server"
                  size="30px"
                  color="#BBBBBB"
                  @tap="showWordListPopup"
                />
              </view> -->
              <view
                :class="
                  activeTap == 0 && playing ? 'active-btn-item' : 'btn-item'
                "
                >跟读列表</view
              >
            </view>
            <view class="btn-box" @click="toReading">
              <view
                :class="
                  activeTap == 1 && readLine !== -1
                    ? 'active-iconBox'
                    : 'iconBox'
                "
              >
                <view
                  :class="
                    activeTap == 1 && readLine !== -1 ? 'is-animation' : ''
                  "
                >
                  <TnIcon
                    name="voice-fill"
                    :size="
                      activeTap == 1 && readLine !== -1 ? '80rpx' : '50rpx'
                    "
                    :color="activeTap == 1 && readLine !== -1 ? '#ffffff' : ''"
                  />
                </view>
              </view>
              <view
                :class="
                  activeTap == 1 && readLine !== -1
                    ? 'active-btn-item'
                    : 'btn-item'
                "
                >跟读</view
              >
            </view>
            <view class="btn-box" @click="toChangeNew">
              <TnIcon
                name="set"
                size="30px"
                color="#BBBBBB"
                @tap="showSetting"
              />
              <view :class="isAnimation ? 'active-btn-item' : 'btn-item'"
                >学习设置</view
              >
            </view>
          </view>
        </view>
      </view>
    </template>
  </xm-container>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, watchEffect } from 'vue'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { onLoad, onHide, onUnload } from '@dcloudio/uni-app'
import { xmContainer } from '@/components/xm-container'
import { getSceneDetailById, toDown, toUp } from '@/services/api'
import { Base64 } from 'js-base64'
import { useWebsocket, useFormat } from '@/hooks'
import srtParser2 from 'srt-parser-2'
import TnLineProgress from '@tuniao/tnui-vue3-uniapp/components/line-progress/src/line-progress.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import type { TnModalInstance } from '@tuniao/tnui-vue3-uniapp/components/modal'
const playWhiteIconPng = ref('../../static/imgs/play-white.png')
const playWhiteIconGif = ref('../../static/imgs/play_icon.gif')
var plugin = requirePlugin('WechatSI')
const loading = ref(false)
let manager = plugin.getRecordRecognitionManager()
const {
  connectWebSocketComment,
  connectWebSocket,
  APPID,
  toBase64,
  handlePlayVideo,
  textTranslate,
  webSocketSendComment,
  webSocketSend,
  webSocketSendOneComment,
  base64toJson,
  handleClickVideo,
  webSocketSendMp3,
  handleCloseVideo,
  splitText,
  closeWebSocket,
  handleDebounce,
  handleGeneratePath,
  handleClearVideo,
} = useWebsocket()
const { encodeWAV, hexToString, buf2hex, wavViewPath } = useFormat()
const innerAudioContext = uni.createInnerAudioContext()
const answer = ref('')
const titleName = ref('')
const currentTime = ref(0)
const picture = ref('')
const asList = ref([] as any)
const audio = ref('')
const playing = ref(false)
let music = uni.createInnerAudioContext()
const overMp3 =
  'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/over.mp3'
const niceMp3 =
  'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/nice.mp3'
const excellent =
  'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/mp3/excellent.mp3'
const activeTap = ref(-1) //0为AI朗读，1为智能跟读
const readLine = ref(-1) //当前需要朗读的第几行
const progressPercent = ref(100) //进度条百分比
const readingStatus = ref(0) //0初始值，1朗读中，2评分中
const duration = ref(50000) //当前句子的时长
const currentItem = ref({} as any) //当前朗读的句子
const tempFilePath = ref() //录音文件
const readList = ref([] as any) //跟读句子列表
const isAnimation = ref(false)
const frameBufferList = ref([])
// 获取录音
const recorderManager = uni.getRecorderManager()
const ids = ref([]) //读过的文章id
const styleId = ref('')
const ifZanStatus = ref(0) //0初始值，1赞,2踩
const asDetail = ref({} as any) //文章详情
const stopSendWebsocket = ref(false) //停止发送websocket
var timeout = null as any
const rightIndex = ref(`right${0}`)
const scrollTop = ref(0)
const offsetTop = ref('300')
let scrollPageHeight = 0
let array = [] as AnyObject
let arrayIndex = 0
const currentNum = ref(0)
const asListIndex = ref(-1)
const ossPngList = ref({
  likeOk:
    'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/likeOk.png',
  likeNot:
    'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/likeNot.png',
  stepOk:
    'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/stepOk.png',
  stepNot:
    'http://aia-upload-sz.oss-cn-shenzhen.aliyuncs.com/hr-wechat/static/stepNot.png',
})
const currentStatus = ref('')
const toListing = () => {
  //关闭录音监听和发送
  if (currentStatus.value == 'multiple') {
    handleClearVideo()
  }
  stopSendWebsocket.value = true
  asListIndex.value = -1
  refresh()
  if (activeTap.value !== 0) {
    initScrollHeight()
  }
  activeTap.value = 0
  console.log('212112')
  onPlayIconClick()
}
//换一批
const toChangeNew = () => {
  if (currentStatus.value == 'multiple') {
    handleClearVideo()
  }
  //关闭录音监听和发送
  isAnimation.value = true
  initScrollHeight()
  clearTimeout(timeout)
  playing.value = false
  asListIndex.value = -1
  stopSendWebsocket.value = true
  handleDebounce(() => {
    music.stop()
    refresh()
    getData()
  }, 100)
}
const toReading = () => {
  if (currentStatus.value == 'multiple') {
    handleClearVideo()
  }
  if (readLine.value == -1) {
    clearTimeout(timeout)
    music.stop()
    playing.value = false
    readList.value = JSON.parse(JSON.stringify(asList.value))
    //刷新
    refresh()
    initScrollHeight()
    stopSendWebsocket.value = true
    handleDebounce(() => {
      activeTap.value = 1
      readLine.value = 0
      initScrollHeight()
      readSentence()
    }, 300)
  } else {
    //停止朗读
    handleDebounce(() => {
      refresh()
      closeWebSocket()
      readList.value = JSON.parse(JSON.stringify(asList.value))
      initScrollHeight()
      clearTimeout(timeout)
      //关闭录音监听和发送
      stopSendWebsocket.value = true
      readLine.value = -1
    }, 300)
  }
}
const handleClickPlay = (value: string, index) => {
  if (![null, undefined, ''].includes(value.audio_url)) {
    readList.value = readList.value.map((item: any, i: any) => {
      return {
        ...item,
        isPlay: i === index,
      }
    })
    handleClickVideo(value.audio_url).then(() => {
      readList.value[index].isPlay = false
    })
    return
  }
}
const handleSinglePlay = (item: any, index: number) => {
  if (currentStatus.value == 'multiple') {
    handleClearVideo()
    music.destroy()
    playing.value = true
    asListIndex.value = index
    handlePlayVideo(item.path).then((res) => {
      if (res) {
        playing.value = false
      }
    })
  } else if (currentStatus.value == 'audio') {
    music.stop() // 等待网络的时候音频暂停
    music.src = audio.value //行播放
    music.onPlay(() => {
      playing.value = true
    })
    music.play()
    music.pause()
    music.seek(item.startSeconds)
    music.play()
    music.onTimeUpdate(() => {
      currentTime.value = music.currentTime
      if (music.currentTime >= item.endSeconds) {
        arrayIndex = index
        music.stop()
        playing.value = false
        music = uni.createInnerAudioContext()
        music.src = audio.value
      }
    })
    music.onEnded(() => {
      //播放结束
      music.stop()
      music = uni.createInnerAudioContext()
      music.src = audio.value
      playing.value = false
      asListIndex.value = -1
    })
  }
}
//朗读倒计时
const readSentence = () => {
  stopSendWebsocket.value = false
  rightIndex.value = 'right' + readLine.value
  offsetTop.value = '50%'
  if (readLine.value > readList.value.length - 1 || readLine.value == -1) {
    // 朗读结束刷新
    refresh()
    return
  } else {
    //当前需要朗读的第几行
    currentItem.value = readList.value[readLine.value]
    if (currentStatus.value == 'multiple') {
      duration.value =
        (readList.value[readLine.value].duration || 3) * 1000 + 1500
    } else if (currentStatus.value == 'audio') {
      duration.value =
        (currentItem.value.endSeconds - currentItem.value.startSeconds) * 1000 +
        1500
    }
    startRecord()
  }
}
// 朗读开始录制
const startRecord = () => {
  if (!stopSendWebsocket.value) {
    try {
      stopSendWebsocket.value = false
      connectWebSocket().then(async (res) => {
        let path = await wavViewPath(frameBufferList.value) //拿到用户的声音
        if (res != '') {
          readList.value[readLine.value].result = res
          readList.value[readLine.value].audio_url = path
          readList.value[readLine.value].isShowResult = true
        } else {
          readList.value[readLine.value].isShowResult = true
          uni.showToast({
            title: '未识别到文字',
            icon: 'none',
          })
        }
        frameBufferList.value = []
      })
      // 评分
      connectWebSocketComment(readList.value[readLine.value].text)
        .then((res) => {
          if (readLine.value !== -1) {
          }
          readList.value[readLine.value].isShowComment = true
          readList.value[readLine.value].rateValue = Number(res.total_score)
          if (!readList.value[readLine.value].hasOwnProperty('repeatNum')) {
            readList.value[readLine.value].repeatNum = 0
          }
          //打分成功且分数小于三分且repeatNum = 0则再朗读一遍
          if (
            readList.value[readLine.value].rateValue < 3 &&
            readList.value[readLine.value].repeatNum < 1
          ) {
            uni.showToast({
              title: '不合格再读一遍吧',
              icon: 'none',
              duration: 2000,
            })
            playSound(readList.value[readLine.value].rateValue).then(() => {
              let currentIndex = readLine.value
              readLine.value = -1
              setTimeout(() => {
                readLine.value = currentIndex
                readList.value[readLine.value].repeatNum += 1
                //关闭websocket
                closeWebSocket()
                readSentence()
              }, 300)
            })
          } else {
            //分数大于等于三分或者repeatNum > 0则再继续下一句
            if (
              readList.value[readLine.value].repeatNum > 0 &&
              readList.value[readLine.value].rateValue < 3
            ) {
              toScroll(`#scroll${readLine.value}`)
              readLine.value += 1
              //关闭websocket
              closeWebSocket()
              readSentence()
            } else {
              playSound(readList.value[readLine.value].rateValue).then(() => {
                toScroll(`#scroll${readLine.value}`)
                readLine.value += 1
                console.log('99999999999999999999999')
                //关闭websocket
                closeWebSocket()
                readSentence()
              })
            }
          }
        })
        .catch((err) => {
          if (stopSendWebsocket.value) {
            console.log('手动人为关闭')
          } else {
            readList.value[readLine.value].isShowComment = false
            uni.showToast({
              title: '评分超时',
              icon: 'none',
              duration: 2000,
            })
            playSound(readList.value[readLine.value].rateValue).then(() => {
              let currentIndex = readLine.value
              readLine.value = -1
              setTimeout(() => {
                readLine.value = currentIndex
                //关闭websocket
                closeWebSocket()
                readSentence()
              }, 300)
            })
          }
        })
      readingStatus.value = 1
      //录音结束倒计时
      timeout = setTimeout(() => {
        if (!stopSendWebsocket.value) {
          endRecord()
        }
      }, duration.value)
      recorderManager.start({
        duration: 120000, // 600000（10 分钟）,默认值 60000（1 分钟）
        numberOfChannels: 1, // 录音通道数，有效值 1/2
        frameSize: 10,
        format: 'pcm', // 音频格式
        sampleRate: 16000, // 采样率
      })
    } catch (e) {
      console.log('错误了', e)
    }
  } else {
    console.log('手动关闭结束录制')
    return
  }

  // state.list[currentIndex.value].isShowResult = true
  // 常规
}
// 朗读停止
const endRecord = () => {
  recorderManager.stop()
  readingStatus.value = 2
}
const startWatch = () => {
  var lastFrame = [] as any
  currentNum.value = 0
  recorderManager.onStop(function (res) {
    if (!stopSendWebsocket.value) {
      // 监听最后一帧
      // 基础
      webSocketSend(lastFrame, true).then((res) => {
        if (res == 'success') {
        }
      })
      webSocketSendComment(
        lastFrame,
        readList.value[readLine.value].text,
        true,
        'end'
      ).then((res) => {
        if (res == 'success') {
        }
      })
      let tempFile = res.tempFilePath //音频文件地址
      tempFilePath.value = tempFile
      // #ifdef MP-WEIXIN
      const fs = uni.getFileSystemManager()
      // 评分
      fs.readFile({
        //读取文件并转为ArrayBuffer
        filePath: tempFile,
        success(res) {},
      })
      currentNum.value = 0
    } else {
      closeWebSocket()
    }
    // #endif
  })
  recorderManager.onFrameRecorded(function (res) {
    if (!stopSendWebsocket.value && readLine.value !== -1) {
      const { frameBuffer, isLastFrame } = res
      lastFrame = frameBuffer
      frameBufferList.value.push(frameBuffer)
      // 基础
      // console.log("Hello world")
      webSocketSend(frameBuffer, isLastFrame).then((res) => {
        if (res == 'success') {
        }
      })
      // 评分
      webSocketSendComment(
        frameBuffer,
        readList.value[readLine.value].text,
        isLastFrame,
        currentNum.value
      ).then((res) => {
        if (res == 'success') {
        }
      })
      currentNum.value = currentNum.value + 1
      if (isLastFrame) {
        currentNum.value = 0
      }
    } else {
      closeWebSocket()
    }
  })
}
//刷新智能跟读
const refresh = () => {
  //关闭录音
  endRecord()
  readLine.value = -1
  readingStatus.value = 0
  duration.value = 0
  currentItem.value = {}
}
const onPlayIconClick = () => {
  if (playing.value) {
    music.pause()
    music.stop()
    currentTime.value = 0
    playing.value = false
  } else {
    if (currentStatus.value == 'multiple') {
      playing.value = true
      const testFun = async function (i: number) {
        asListIndex.value = i
        toScroll(`#right${i}`)
        let num = await handlePath(asList.value[i].path)
        if (i == asList.value.length - 1) {
          playing.value = false
          asListIndex.value = -1
          console.log(currentStatus.value)
          return
        }
        i++
        testFun(i)
      }
      if (asListIndex.value == -1) {
        testFun(0)
      } else {
        testFun(asListIndex.value)
      }
    } else {
      music.play() //执行播放
      music.onPlay(() => {
        playing.value = true
      })
      music.onTimeUpdate(() => {
        currentTime.value = music.currentTime
        //当音频当前播放时间大于字幕每段话开始的时间，就滚动到这段话
        if (music.currentTime > array[arrayIndex]) {
          toScroll(`#right${arrayIndex}`)
          arrayIndex += 1
        }
      })
      music.onEnded(() => {
        //播放结束
        music.stop()
        playing.value = false
        asListIndex.value = -1
      })
    }
  }
}
const handlePath = (str: string) => {
  return new Promise((resolve, reject) => {
    music.stop() // 等待网络的时候音频暂停
    music = uni.createInnerAudioContext()
    music.src = str
    music.play()
    music.onEnded(() => {
      //播放结束
      music.stop()
      music = uni.createInnerAudioContext()
      resolve(true)
    })
  })
}
//初始化页面滚动高度
const initScrollHeight = () => {
  arrayIndex = 0
  scrollPageHeight = 0
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 200,
  })
}

const toScroll = (query: string) => {
  setTimeout(() => {
    uni
      .createSelectorQuery()
      .select(query)
      .boundingClientRect((res) => {
        scrollPageHeight = scrollPageHeight + res?.height
        uni.pageScrollTo({
          // 3. 滚动的距离根据设备的页面高度进行微调（px）
          scrollTop: scrollPageHeight + 13,
          duration: 500,
        })
      })
      .exec()
  }, 50)
}
const str = ref('')
var parser = new srtParser2()
onLoad((options) => {
  activeTap.value = 0
  const { id, name, answerZh } = options
  styleId.value = id
  if (styleId.value) {
    getData()
  }
  if (name) {
    titleName.value = name
  }
  if (answerZh) {
    onTranslate(answerZh)
  }
  startWatch()
})

onHide(() => {
  music.stop()
  //关闭录音监听和发送
  stopSendWebsocket.value = true
  refresh()
  closeWebSocket()
})
onUnload(() => {
  readList.value = []
  music.stop()
  //关闭录音监听和发送
  stopSendWebsocket.value = true
  refresh()
  closeWebSocket()
})
const animation = () => {
  isAnimation.value = false
}
//将'00:01:60,888'格式时间转化为秒
const setTime = (time) => {
  let aTime = time.split(',')[0]
  let sTime = '.' + time.split(',')[1]
  let s = aTime.split(':')[0]
  let f = aTime.split(':')[1]
  let m = aTime.split(':')[2]
  let allTime = Number(s * 3600 + f * 60 + Number(m) + sTime)
  return allTime
}
const getData = () => {
  let params = { ids: ids.value }
  getSceneDetailById(styleId.value, params).then((res) => {
    const { code, data } = res
    if (code === 0) {
      if (data.id !== 0) {
        asDetail.value = data
        str.value = data.subtitles
        let audioMap = []
        if (data.subtitles == '') {
          audioMap = JSON.parse(data.audio_map)
          audioMap.map((item, index) => {
            item.path = item.audio
            item.text = item.content
          })
          asList.value = audioMap
          currentStatus.value = 'multiple'
        } else {
          asList.value = parser.fromSrt(str.value)
          currentStatus.value = 'audio'
          let nstr = ''
          parser.fromSrt(str.value).map((item, index) => {
            // console.log(item.text,"21121")
            nstr += `
							${item.text}`
          })
        }
        ids.value.push(data.id)
        music.src = data.audio
        audio.value = data.audio
        picture.value = data.picture
        ifZanStatus.value = data.like
        readList.value = JSON.parse(JSON.stringify(asList.value))
        currentTime.value = 0
        array = asList.value.map((item, index) => {
          return item.startSeconds
        })

        isAnimation.value = false
        setTimeout(function () {
          loading.value = true
        }, 500)
      } else {
        if (data.total) {
          ids.value = []
          getData()
        } else {
          uni.showToast({
            title: '暂时没有数据!',
            icon: 'none',
            duration: 2000,
          })
        }
      }
    }
  })
}

//点赞
const onZanIconClick = async () => {
  const res = await toUp(asDetail.value.id)
  if (res.code === 0) {
    if (res.status === 1) {
      ifZanStatus.value = 1
      uni.showToast({
        title: '已赞',
        duration: 2000,
      })
    } else if (res.status === 0) {
      ifZanStatus.value = 0
    }
  } else {
    uni.showToast({
      title: res.msg,
      duration: 2000,
    })
  }
}
// 点踩
const onCaiIconClick = async () => {
  const res = await toDown(asDetail.value.id)
  let { code } = res
  if (code === 0) {
    if (res.status === 2) {
      ifZanStatus.value = 2
      uni.showToast({
        title: '已踩',
        duration: 2000,
      })
    } else if (res.status === 0) {
      ifZanStatus.value = 0
    }
  } else {
    uni.showToast({
      title: res.msg,
      duration: 2000,
    })
  }
}

//提示音播放
const playSound = (score) => {
  return new Promise((resolve, reject) => {
    let promptSound = uni.createInnerAudioContext() //提示音
    let sound =
      score < 3
        ? overMp3
        : 3 <= score && score < 4
          ? niceMp3
          : score >= 4
            ? excellent
            : ''
    promptSound.src = sound
    promptSound.play() //执行播放
    promptSound.onPlay(() => {
      console.log('播放中')
    })
    promptSound.onEnded(() => {
      // promptSound.stop()
      promptSound.destroy()
      promptSound.offEnded(() => {
        console.log('取消监听')
      })
      resolve(true)
    })
    promptSound.onError((res) => {
      console.log('播放错误', res.errMsg)
    })
  })
}

//中文翻译成英文
const onTranslate = (answerZh) => {
  plugin.translate({
    lfrom: 'zh_CN',
    lto: 'en_US',
    content: answerZh,
    success: function (res) {
      if (res.retcode == 0) {
        answer.value = res.result
        outputText(answer.value)
      } else {
        console.warn('翻译失败', res)
      }
    },
    fail: function (res) {
      console.log('网络失败', res)
    },
  })
}

//流式输出文字
const outputText = (text) => {
  var index = 0
  const streamOutput = () => {
    if (index < text.length) {
      var currentText = text.substring(0, index + 1)
      answer.value = currentText
      index++
    } else {
      clearInterval(timer)
    }
  }
  let timer = setInterval(streamOutput, 20)
}
</script>

<style lang="scss" scoped>
page {
  max-height: 100vh;
}

.container {
  .scroll-box {
    width: 100%;
    padding: 48rpx 48rpx 258rpx;

    .title-box {
      background: linear-gradient(90deg, #6b8bfb 0%, #4b49e8 100%);
      //   padding: 24rpx 32rpx;
      width: 100%;
      height: 68rpx;
      line-height: 68rpx;
      text-align: center;
      color: #fff;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
    }

    .banner-img {
      width: 100%;
      // height: 384rpx;
      margin-bottom: 24rpx;
    }

    .textBox {
      width: 100%;

      .text {
        width: 100%;
        font-size: 28rpx;
        color: #191919;
        border-radius: 0 22rpx 22rpx 22rpx;
        margin-bottom: 10rpx;
        background: linear-gradient(
          135deg,
          #ffffff 0%,
          rgba(255, 255, 255, 0.88) 0%,
          rgba(255, 255, 255, 0.49) 100%
        );
        padding: 24rpx;
      }
      .chinese_text {
        padding-left: 20rpx;
      }

      .activeText {
        text {
          color: #4b49e8;
          font-size: 30rpx;
          font-weight: bold;
        }
      }

      .result-wrap {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        margin-bottom: 24rpx;
        display: grid;

        .comment-box {
          max-width: 500rpx;
          background: #fff;
          display: flex;
          align-items: flex-end;
          padding: 20rpx;
          border-radius: 40rpx;
          background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
          font-weight: 400;
          font-size: 28rpx;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 32rpx 0 32rpx 32rpx;
        }

        image {
          width: 48rpx;
          height: 48rpx;
          border-radius: 50%;
          margin-left: 12rpx;
          margin-right: 0rpx;
        }
      }
    }

    .imgBox {
      display: flex;
      justify-content: flex-end;

      button {
        margin: 0;
        background: none;
        padding: 0;
        margin-right: 16rpx;
      }

      &-icon {
        width: 48rpx;
        height: 48rpx;
      }
    }
  }

  .bottom_box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;

    .wrap {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      width: 100%;
      padding: 0 30rpx 50rpx;
      height: 258rpx;
      background: #ffffff;

      .btn-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 200rpx;

        .iconBox {
          width: 88rpx;
          height: 88rpx;
          background: #ffffff;
          box-shadow: 0rpx 8rpx 8rpx 0rpx #f8f8f8;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .active-iconBox {
          background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
          box-shadow: 0rpx 8rpx 8rpx 0rpx #f8f8f8;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          width: 120rpx;
          height: 120rpx;
          align-items: center;
          animation: spin 0.2s 0s 1;
        }

        .refish {
          transition: 1s;
          transform: rotate(360deg);
        }

        .btn-item {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 28rpx;
          margin-top: 28rpx;
        }

        .active-btn-item {
          color: #191919;
          font-weight: 400;
          font-size: 24rpx;
          line-height: 28rpx;
          margin-top: 20rpx;
        }
      }
    }
  }
}

:deep(.tn-modal) {
  border-radius: 48rpx !important;
  background: linear-gradient(164deg, #dee2ff 2%, #ffffff 100%);
  width: 556rpx !important;
  height: 344rpx !important;
}

:deep(.tn-modal__title) {
  font-size: 32rpx !important;
  color: #000000;
  font-weight: 600 !important;
  padding-top: 48rpx !important;
}

:deep(.tn-modal__content--text) {
  font-size: 24rpx;
  color: #666666;
}

:deep(.tn-modal__operation) {
  border-top: none !important;
  justify-content: center;
  margin-top: 48rpx !important;
}

:deep(.tn-modal__operation-btn) {
  width: 460rpx !important;
  height: 80rpx !important;
  background: linear-gradient(90deg, #4b49e8 0%, #6b8bfb 100%);
  border-radius: 40rpx;
  flex-grow: initial !important;
  font-size: 32rpx !important;
  color: #ffffff !important;
  line-height: 80rpx;
}

:deep(.tn-modal__content) {
  padding-top: 32rpx !important;
}

@keyframes spin {
  0% {
    scale: 0.9;
  }

  25% {
    scale: 1;
  }

  50% {
    scale: 1.1;
  }

  75% {
    scale: 1;
  }

  100% {
    scale: 0.9;
  }
}

/*点赞图标放大动画开始*/
@keyframes myfirst {
  0% {
    scale: 0.9;
    transform: rotate(10deg);
  }

  100% {
    scale: 1;
    transform: rotate(0deg);
  }
}

.animation {
  animation: myfirst 0.5s;
}
:deep(.tn-lazy-load__image) {
  border-radius: 16rpx !important;
}
</style>
